$(function () {
    var mySwiper = new Swiper('#list-wrapper .swiper-container', {
        direction: 'vertical',
        loop: true,
        slidesPerView: 'auto',
        observer: true,
        autoplay: {
            delay: 1000,
            stopOnLastSlide: false,
            disableOnInteraction: true,
        },
        on: {
            click: function () {

                mySwiper2.removeAllSlides(); //移除全部
                var newSlides = [];
                for (let index = 0; index < 20; index++) {
                    const element = '<div class="swiper-slide"> 2017年生产应急处' + index + '置预案</div>'
                    newSlides.push(element)
                }

                mySwiper2.appendSlide(newSlides)
                mySwiper2.updateSlides()
                mySwiper2.update()
                mySwiper2.slideTo(1, 10); //切换到第一个slide，速度为1秒
                mySwiper2.autoplay.start();
            },
        },

    })
    //鼠标覆盖停止自动切换
    var comtainer = document.getElementById('list-wrapper');
    comtainer.onmouseenter = function () {
        mySwiper.autoplay.stop();
    };
    comtainer.onmouseleave = function () {
        mySwiper.autoplay.start();
    }

    var mySwiper2 = new Swiper('#list-wrapper2 .swiper-container', {
        direction: 'vertical',
        loop: false,
        slidesPerView: 'auto',
        observer: true,
        autoplay: {
            delay: 1000,
            stopOnLastSlide: false,
            disableOnInteraction: true,
        },

    })
    //鼠标覆盖停止自动切换
    var comtainer2 = document.getElementById('list-wrapper2');
    comtainer2.onmouseenter = function () {
        mySwiper2.autoplay.stop();
    };
    comtainer2.onmouseleave = function () {
        mySwiper2.autoplay.start();
    }
    showBar1()
    showBar2()
})

function showBar1() {
    var myChart = echarts.init(document.getElementById("bar1"));
    var option = {
        legend: {
            top: '15%',
            data: [
                '药品', '医疗器械'
            ],
            textStyle: {
                color: '#97B8C9',
                fontSize: 16
            }
        },
        tooltip: {
            trigger: 'axis',
            textStyle: {
                fontSize: 16
            }
        },
        grid: {
            top: '28%',
            left: '6%',
            right: '6%',
            bottom: '10%',
            containLabel: true
        },
        xAxis: {
            type: 'category',

            // boundaryGap: false,

            axisLine: {
                onZero: false,
                show: true,

                lineStyle: {
                    color: '#1178C9'
                }
            },
            axisLabel: {
                interval: 0,

                textStyle: {
                    color: '#97B8C9',
                    fontSize: 16

                },
                formatter: function (params) {

                    if (params.length > 4) {
                        var _name = params.substring(0, 4) + '\n' + params.substring(4, params.length);
                        return _name;
                    }
                    return params
                }

            },

            axisLine: {
                show: true,
                lineStyle: {
                    color: '#07274D'
                }
            },
            axisTick: {
                lineStyle: {
                    color: '#1178C9'
                }
            },
            splitLine: {
                lineStyle: {
                    color: '#07274D'
                }
            },
            data: [
                '阿克苏市',
                '库里县',
                '新和县',
                '沙雅县',
                '拜城县',
                '温宿县',
                '阿瓦提县',
                '乌什县'

            ]
        },
        yAxis: [

            {
                type: 'value',
                interval: 0,
                splitLine: {
                    lineStyle: {
                        color: '#07274D'
                    }
                },
                axisLine: {
                    onZero: false,

                    lineStyle: {
                        color: '#07274D'
                    }
                },
                axisTick: {
                    lineStyle: {
                        color: '#1178C9'
                    }
                },
                axisLabel: {
                    textStyle: {
                        color: '#97B8C9',
                        fontSize: 16

                    },
                    formatter: '{value} '
                }
            }
        ],

        series: [{
            name: '药品',
            type: 'bar',
            itemStyle: {
                normal: {
                    color: "#7630ED"

                }
            },
            data: [
                1,
                22,
                2,
                5,
                3,
                22,
                2,
                5
            ]

        }, {
            name: '医疗器械',
            type: 'bar',
            itemStyle: {
                normal: {
                    color: "#4FE0FD"
                    //  function(value) {
                    //     var coloeList = [
                    //         '#DF31EB',
                    //         '#7630ED',
                    //         '#3157EC',
                    //         '#4FE0FD',
                    //         '#21FB30',
                    //         '#EB3432',
                    //         '#FF8516',
                    //         '#F2E52C'
                    //     ]
                    //     return coloeList[value.dataIndex]
                    //
                    // }
                }
            },
            data: [
                1,
                22,
                2,
                5,
                3,
                22,
                2,
                5
            ]

        }]
    };

    myChart.setOption(option);

}

function showBar2() {
    var myChart = echarts.init(document.getElementById("bar2"));
    var option = {
        // 
        tooltip: {
            trigger: 'axis',
            textStyle: {
                fontSize: 16
            }
        },
        grid: {
            top: '10%',
            left: '6%',
            right: '6%',
            bottom: '10%',
            containLabel: true
        },
        yAxis: {
            type: 'category',

            axisLine: {
                onZero: false,
                show: true,
                lineStyle: {
                    color: '#1178C9',
                    fontSize: 16
                }
            },
            axisLabel: {
                interval: 0,

                textStyle: {
                    color: '#97B8C9',
                    fontSize: 16

                }

            },
            axisLine: {
                lineStyle: {
                    color: '#07274D'
                }
            },
            axisTick: {
                lineStyle: {
                    color: '#1178C9'
                }
            },
            splitLine: {
                show: true,
                lineStyle: {
                    color: '#07274D'
                }
            },
            data: [
                '餐饮',
                '保健食品',
                '化妆品',
                '药品生产',
                '药品流通',
                '食品流通',
                '医疗器械',
                '食品生产'

            ]
        },
        xAxis: [{
            type: 'value',
            max: 100,
            interval: 0,
            splitLine: {
                show: false,
                lineStyle: {
                    color: '#07274D'
                }
            },
            axisLine: {
                onZero: false,

                lineStyle: {
                    color: '#07274D'
                }
            },
            axisTick: {

                lineStyle: {
                    color: '#1178C9'
                }
            },
            axisLabel: {
                textStyle: {
                    color: '#97B8C9'

                },
                formatter: '{value} '
            }
        }],

        series: [{
            name: '召回完成率情况',
            type: 'bar',
            stack: '总量',
            itemStyle: {
                normal: {
                    color: "#DA55FF"
                }
            },
            label: {
                normal: {
                    show: true,
                    position: 'insideRight',
                    formatter: '{c}%'
                }

            },
            data: [
                1,
                22,
                12,
                15,
                13,
                22,
                2,
                5
            ]

        }]
    };

    myChart.setOption(option);

}